{% for product in page_obj %}
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
    <div class="card product-card">
        <a href="{% url 'product_detail' product.id %}">
            <img src="" data-src="{{ product.get_main_image_url }}" class="card-img-top product-img lazy-load" alt="{{ product.name }}">
            {% if product.is_new %}
            <span class="badge bg-success position-absolute" style="top: 10px; left: 10px;">新品</span>
            {% endif %}
            {% if product.is_on_sale %}
            <span class="badge bg-danger position-absolute" style="top: 10px; right: 10px;">
                {% if product.discount_rate > 0 %}
                {{ product.discount_rate }}% OFF
                {% else %}
                促销
                {% endif %}
            </span>
            {% endif %}
        </a>
        <div class="card-body">
            <h5 class="card-title">
                <a href="{% url 'product_detail' product.id %}" class="text-decoration-none text-dark">{{ product.name }}</a>
            </h5>
            <div class="mb-2">
                <span class="price">¥{{ product.price }}</span>
                {% if product.original_price and product.original_price > product.price %}
                <span class="original-price">¥{{ product.original_price }}</span>
                {% endif %}
            </div>
            <p class="card-text text-muted">{{ product.description|default:product.name|truncatechars:50|safe }}</p>
        </div>
        <div class="card-footer bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted">{{ product.store_name }}</small>
                <a href="{% url 'product_detail' product.id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
            </div>
        </div>
    </div>
</div>
{% empty %}
<div class="col-12">
    <div class="alert alert-info">暂无商品数据</div>
</div>
{% endfor %} 